<script setup>
    import axios from 'axios';
    import {ref,nextTick,computed} from 'vue';
    import { RouterLink, useRouter } from 'vue-router';
    import { useMenuStore } from '@/stores/menu';
    import { eventBus } from './evevtBus';
    let tabs = useMenuStore();
    let router = useRouter();
    let menu = ref({});
    let menulist = ref([]);
    axios.get("/api/menu").then((res) => {
        if (res.data.status == 501) {
            router.push("/");
        }
        menulist.value = res.data;
    });

    let menus = computed(()=>{
        let list = {};
        for (let i = 0; i < menulist.value.length; i++) {
            if (menulist.value[i].pid == 0) {
                list[menulist.value[i].id] = menulist.value[i];
                list[menulist.value[i].id].open = false;
                list[menulist.value[i].id].children = [];
            }
        }
    for (let i = 0; i < menulist.value.length; i++) {
        if (menulist.value[i].pid != 0) {
            list[menulist.value[i].pid].children.push(menulist.value[i]);
        }
    }
    return list;
})

function doopen(index) {
    menus.value[index].open = !menus.value[index].open;
}

function sel(id){
    menulist.value.forEach(item=>{
        if(item.id==id){
            item.checked = true;
            addTab(item);
            router.push(item.path)
        }else{
            item.checked = false;
        }
    })
}

async function addTab(menu){
    tabs.addTab(menu);
    await nextTick();
    eventBus.emit('tw');
}
  
function logout(){
    axios.get('/api/logout').then(res =>{
        router.push('/');
        showMsg(res.data.msg,'info')
    })}


</script>

<template>
    <ul class="menu">
        <li v-for="(item,index) in menus" :key="index">
            <div class="parent" @click="doopen(item.id)">
                
                <!-- <img :src="'/src/assets/'+item.icon"> -->
                <template v-if="!item.children.length">
                     <RouterLink :to="item.path"  @click="addTab(item)" class="jb">{{ item.title }}</RouterLink>
                </template>
                <template v-else>
                    <span>{{ item.title }}</span>
                </template>
            </div>
            <!-- <ul class="child" v-show="item.open">
                <li v-for="it in item.children" :key="it.id" @click="sel(it.id)" :style="it.checked?'background-color:#0BB;':''">
                    <img :src="'/src/assets/'+it.icon">
                    {{ it.title }}
                </li>
            </ul> -->
        </li>   
    </ul>
</template>

<style scoped>
   *{
        padding: 0;
        margin: 0;
    }

    .box{
        margin:0 auto ;
    }

    /* 全部左右方向布局 */
    .qb{
        display: flex;
    }

    /* 左边css样式 */
    span{
        color: white;
        /* font-weight: bold; */
        font-size: 23px;
    }
    ul{
        list-style: none;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        gap: 35px;
        font-size: 14px;
        color: rgb(173, 181, 187);
        cursor: pointer;
        margin-top: 35px;
    }
    /* menu li:active {
      color: rgba(12, 218, 122, 0.98);
    } */
    .menu li{
       color: white;
    }
    .menu li:active{
        color: white;
    }
    .jb{
        color: rgb(236, 228, 228);
        text-decoration: none;
        font-size: 14px;
    }
    .jb:active{
        color: aquamarine;
    }
</style>